<template>
  <div
    id="app"
    :class="this.$route.meta.container"
    v-cloak
  >
    <navbar v-if="this.$route.meta.tabbar" />
    <keep-alive>
      <router-view v-if="this.$route.meta.keepAlive && isRouterAlive"></router-view>
    </keep-alive>
    <router-view v-if="!this.$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { AppMain, Navbar } from '@/layout/components'
export default {
  name: 'App',
  components: {
    AppMain,
    Navbar
  },
  provide () {
    return {
      reload: this.reload,
      share: this.toShare
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  mounted () {
    console.log('APP mounted')
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    toShare (data) {
      console.log(data)
      this.$store
        .dispatch('share/setData', data)
        .then(res => {
          console.log(res)
        })
        .catch(e => {
          console.log(e)
        })
    }
  }
}
</script>

<style type="text/css">
[v-cloak] {
  display: none !important;
}
#app {
  height: 100%;
}

</style>
